<!DOCTYPE html>
<html lang="en" style="height: 100%;">

<head>
    <meta charset="UTF-8">
    <title>沙盒及方法</title>
    <link rel="stylesheet" href="css/neo4jd3.min.css">
    <link rel="stylesheet" href="css/rightMenu.css">

    <script src="js/d3.js"></script>
    <script src="js/neo4jd3.js"></script>
    <script src="js/GraphInit.js"></script>
    <script src="js/GraphAppend.js"></script>
    <script src="js/KN_CodeAppend.js"></script>
    <script src="js/rightMenu.js"></script>
    <script src="./js/localMap.js"></script>
    <script src="./js/jsonToNeo4jNode.js"></script>

    <script src="./deepJS/wsDataGet.js"></script>
</head>

<body style="height: 100%; margin: 0; font-family: 'Helvetica Neue', Arial, sans-serif; background-color: #f5f7fa;"
    onload="onload()">
    <header
        style="background-color: #2c3e50; color: white; padding: 15px 20px; box-shadow: 0 2px 10px rgba(0,0,0,0.1);">
        <h1 style="margin: 0; font-size: 24px; display: inline-block;" onclick="onStart()">知识图谱可视化</h1>
        <div style="float: right;">
            <div style="display: inline-block; margin-right: 15px;">
                <select id="fontSelect"
                    style="padding: 8px 12px; border-radius: 4px; border: 1px solid #ddd; background: white; color: #333; cursor: pointer;"
                    onchange="changeFontFamily()">
                    <option value="'Helvetica Neue', Arial, sans-serif">默认字体</option>
                    <option value="'Times New Roman', serif">Times New Roman</option>
                    <option value="'Arial', sans-serif">Arial</option>
                    <option value="'Courier New', monospace">Courier New</option>
                </select>
                <select id="fontSizeSelect"
                    style="padding: 8px 12px; border-radius: 4px; border: 1px solid #ddd; background: white; color: #333; cursor: pointer; margin-left: 10px;"
                    onchange="changeFontSize()">
                    <option value="10">10px</option>
                    <option value="12">12px</option>
                    <option value="14">14px</option>
                    <option value="16">16px</option>
                </select>
            </div>
            <label for="fileInput" class="custom-file-upload"
                style="display: inline-block; padding: 8px 16px; background: #3498db; color: white; border-radius: 4px; cursor: pointer; transition: all 0.3s ease;">
                导入JSON数据
            </label>
            <input type="file" id="fileInput" accept=".json" style="display: none;">
        </div>
    </header>

    <div style="padding: 10px 20px;" id="showTipBar">
        <div
            style="margin-bottom: 10px; background: white; border-radius: 6px; padding: 10px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
            <span style="font-weight: bold; color: #555;">操作指南：</span>
            <span style="color: #666; margin-left: 10px;">点击节点查看详情，拖拽可移动视图，滚轮缩放图谱</span>
        </div>
        <div>
            <button onclick="buildWebSocket()">连接本地Socket</button>
            <button onclick="getFirstNode()">获得开始节点</button>
            <button onclick="getNextNodes()">获得下一个节点</button>
        </div>
    </div>

    <div id="neo4jd3"
        style="height: calc(100% - 130px); margin: 0 20px 20px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); background-color: white; overflow: hidden;width:100%">
    </div>

    <div id="loading-indicator"
        style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,0.7); color: white; padding: 20px; border-radius: 8px; z-index: 1000;">
        <div style="text-align: center;">
            <div
                style="border: 5px solid #f3f3f3; border-top: 5px solid #3498db; border-radius: 50%; width: 40px; height: 40px; margin: 0 auto 15px; animation: spin 2s linear infinite;">
            </div>
            <div>加载中...</div>
        </div>
    </div>
</body>
<script>
    var useSimpleStyle = false;
    function onload() {
        loadData();
        const urlParams = new URLSearchParams(window.location.search);
        if (urlParams.has('style') && urlParams.get('style') === 'simple') {
            document.getElementById('showTipBar').style.display = 'none';
            useSimpleStyle = true;
            document.getElementById('neo4jd3').style.height = '100%';
        }
        
        window.addEventListener('message', function (event) {
            // 确保消息来源可信
            if (event.origin !== window.location.origin) return;

            // 检查消息类型
            if (event.data.type === 'loadJson') {
                const fileUrl = event.data.url;

                // 显示加载指示器
                document.getElementById('loading-indicator').style.display = 'block';

                fetch(fileUrl)
                    .then(response => response.json())
                    .then(data => {
                        // 隐藏加载指示器
                        document.getElementById('loading-indicator').style.display = 'none';

                        loadJSON(data);
                    })
                    .catch(error => {
                        console.error('加载JSON文件失败:', error);
                        // 隐藏加载指示器
                        document.getElementById('loading-indicator').style.display = 'none';
                        alert('加载JSON文件时出错');
                    });
            }
        });
    }
    
    function loadJSON(jsonData){
        try {
            const newData = appendData(window.globel.currentNeo4jData, jsonData);
            if (newData) initGraph(newData, { infoPanel: !useSimpleStyle });
            const newData2 = appendCodeKN(window.globel.currentNeo4jData, jsonData);
            if (newData2) initGraph(newData2, { infoPanel: !useSimpleStyle });
        } catch (err) {
            console.error('无效的 JSON 文件:', err);
            alert('请选择有效的 JSON 文件。');
        }
    }
    
    function onStart(){
        window.globel.currentNeo4jData=null;
    }
    
    document.getElementById('fileInput').addEventListener('change', function (event) {
        const file = event.target.files[0];
        if (file) {
            const reader = new FileReader();

            reader.onload = function (e) {
                const jsonData = JSON.parse(e.target.result);
                loadJSON(jsonData);
            };

            reader.onerror = function (err) {
                console.error('文件读取错误:', err);
                alert('读取文件时出错。');
            };

            reader.readAsText(file);
        }
    });
    function changeFontFamily() {
        const fontFamily = document.getElementById('fontSelect').value;
        const svgElements = document.querySelectorAll('.neo4jd3 svg text');
        svgElements.forEach(svg => {
            svg.style.fontFamily = fontFamily;
        });
    }

    function changeFontSize() {
        const fontSize = document.getElementById('fontSizeSelect').value + 'px';
        const svgElements = document.querySelectorAll('.neo4jd3 svg text');
        svgElements.forEach(svg => {
            svg.style.fontSize = fontSize;
        });
    }

</script>
<style>
    #neo4jd3 {
        flex-grow: 1;
        /* 自动填充剩余空间 */
        height: 98%;
        overflow-y: hidden;
    }

    .neo4jd3-graph {
        border-radius: 0;
        border-top: 0;
    }
</style>

</html>